<script lang="ts" setup>
import { InputNumber } from 'ant-design-vue';

const emit = defineEmits(['blur', 'change']);

const intModelValue = defineModel<[number, number]>({
  default: () => [],
});

function onChange() {
  emit('change', intModelValue.value);
}
</script>
<template>
  <div class="center flex w-full gap-1">
    <InputNumber
      v-model:value="intModelValue[0]"
      placeholder="最小值"
      :class="{ 'valid-success': !!intModelValue[0] }"
      @blur="emit('blur')"
      @change="onChange"
      class="flex-1"
    />
    <span class="pb-1 pl-2 pr-2 pt-1">-</span>
    <InputNumber
      v-model:value="intModelValue[1]"
      placeholder="最大值"
      :class="{ 'valid-success': !!intModelValue[1] }"
      @blur="emit('blur')"
      @change="onChange"
      class="flex-1"
    />
  </div>
</template>
